<template>
	<view class="tp-pd30 tp-bgf tp-vh100">
		<!-- 步骤条 S -->
		<view class="tp-ptb0lr40 level_align flex_around tp-fc666">
			<view class="tp-pr">
				<uni-icons type="circle-filled" size="22" :color="step > 1 ?'#00B4FF': '#ccc'"></uni-icons>
				<text class="title" :class="{'tp-fc':step > 1}">商家信息</text>
			</view>
			<view class="line" :style="{background: step > 1 ? '#00B4FF': '#ccc'}"></view>
			<view class="tp-pr">
				<uni-icons type="circle-filled" size="22" :color="step > 2 ?'#00B4FF': '#ccc'"></uni-icons>
				<text class="title" :class="{'tp-fc':step > 2}">个人信息</text>
			</view>
			<view class="line" :style="{background: step > 2 ? '#00B4FF': '#ccc'}"></view>
			<view class="tp-pr">
				<uni-icons type="circle-filled" size="22" :color="step > 3 ?'#00B4FF': '#ccc'"></uni-icons>
				<text class="title" :class="{'tp-fc':step > 3}">审核中</text>
			</view>
			<view class="line" :style="{background: step >= 4 ? '#00B4FF': '#ccc'}"></view>
			<view class="tp-pr">
				<uni-icons type="circle-filled" size="22" :color="step >= 4 ?'#00B4FF': '#ccc'"></uni-icons>
				<text class="title" :class="{'tp-fc':step >= 4}">审核结果</text>
			</view>
		</view>
		<view class="tp-h72"></view>
		<!-- 步骤条 E -->

		<!-- 商家信息 S -->
		<view class="" v-if="step == 1">
			<view class="tp-lh64">
				<text class="tp-red tp-mr10">★</text> <text>商家名称</text>
			</view>
			<view class="tp-border1 tp-h88 level_align flex_between tp-br8 tp-ptb0lr20">
				<input class="flex-1" type="text" value="" v-model="form.shopName" placeholder="请填写商家名称" />
			</view>
			<view class="tp-lh64">
				<text class="tp-red tp-mr10">★</text> <text>类型选择</text>
			</view>
			<view class="tp-border1 tp-h88 level_align flex_between tp-br8 tp-ptb0lr20" @click="handleActionSheet">
				<input class="flex-1" type="text" :value="shopType.name" disabled placeholder="请选择商家类型" />
				<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
			</view>
			<view class="tp-lh64" v-if="shopType.type == 1">
				<text class="tp-red tp-mr10">★</text> <text>店铺类型</text>
			</view>
			<picker mode="selector" :range="shopCategoryList" range-key="name" @change="handleShopCategory">
				<view class="tp-border1 tp-h88 level_align flex_between tp-br8 tp-ptb0lr20" v-if="shopType.type == 1">
					<input class="flex-1" type="text" :value="storeType.name" disabled placeholder="请选择店铺类型" />
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</picker>
			<view class="tp-lh64">
				<text class="tp-red tp-mr10">★</text> <text>所在地 </text>
			</view>
			<picker mode="multiSelector" :range="trafficArr" range-key="label" @change="trafficChange" @columnchange="bindMultiPickerColumnChange">
				<view class="tp-border1 tp-h88 level_align flex_between tp-br8 tp-ptb0lr20" v-if="[2,3,4].includes(shopType.type - 0)">
					<input class="flex-1" type="text" disabled :value="form.shopAddr" placeholder="请选择(省市区)" />
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</picker>
			<view class="tp-border1 tp-h88 level_align flex_between tp-br8 tp-ptb0lr20" @click="showMulLinkageThreePicker" v-if="![2,3,4].includes(shopType.type - 0)">
				<input class="flex-1" type="text" disabled :value="form.shopAddr" placeholder="请选择(省市区)" />
				<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
			</view>
			<view class="tp-lh64">
				<text class="tp-red tp-mr10">★</text> <text>营业执照</text>
			</view>
			<view  class="tp-mb20 level_align flex_wrap">
				<view class="up-img tp-mb20 tp-pr" @click="previewImg(item,licenseList)" v-for="(item,index) in licenseList" :key="index" :style="{marginRight: (index + 1) % 4 == 0 ? '0': '32rpx'}">
					<image class="up-img "  :src="item"  mode="aspectFill"></image>
					<uni-icons @click.stop="delImg(index)" class="close-icon" type="close" size="20" color="#000000"></uni-icons>
				</view>
				<view class="">
					<image @click="handleUploadIDImgPositive('licenseList')" v-if="licenseList.length < 8" class="up-img tp-mb20" src="static/upimg1.png" mode=""></image>
				</view>
				
			</view>
		</view>
		<!-- 商家信息 S -->

		<!-- 个人信息 S -->
		<view class="" v-if="step == 2">
			<view class="tp-lh64">
				<text class="tp-red tp-mr10">★</text> <text>法人姓名</text>
			</view>
			<view class="tp-border1 tp-h88 level_align flex_between tp-br8 tp-ptb0lr20">
				<input class="flex-1" type="text" value="" v-model="form.legalName" placeholder="请填写法人姓名" />
			</view>
			<view class="tp-lh64">
				<text class="tp-red tp-mr10">★</text> <text>手机号</text>
			</view>
			<view class="tp-border1 tp-h88 level_align flex_between tp-br8 tp-ptb0lr20">
				<input class="flex-1" type="number" value="" maxlength="11" v-model="form.legalPhone" placeholder="请输入手机号" />
			</view>
			<view class="tp-lh64">
				<text class="tp-red tp-mr10">★</text> <text>验证码</text>
			</view>
			<view class="tp-border1 tp-h88 level_align flex_between tp-br8 tp-ptb0lr20 tp-pr">
				<view class="input">
					<input type="number" v-model="form.code" maxlength="6" placeholder="请输入验证码" />
				</view>
				<!-- <input class="flex-1" type="number" value="" maxlength="11" v-model="form.code" placeholder="请输入验证码" /> -->
				<view v-if="!time" class="getcodebtn tp-pyc" @click="getCode">获取验证码</view>
				<view v-else class="getcodebtn tp-pyc">{{time}}</view>
			</view>
			<view class="tp-lh64">
				<text class="tp-red tp-mr10">★</text> <text>身份证号</text>
			</view>
			<view class="tp-border1 tp-h88 level_align flex_between tp-br8 tp-ptb0lr20">
				<input class="flex-1" type="idcard" value="" maxlength="18" v-model="form.idNumber" placeholder="请输入身份证号" />
			</view>
			<!-- 审核 -->
			<view class="">
				<view class="tp-lh64">
					<text class="tp-red tp-mr10">★</text> <text>证件照</text>
				</view>
				<view class="level_align">
					<view @click="handleUploadIDImgPositive('cardFront')" class=" tp-mb20 tp-mr40">
						<image v-if="!cardFront" class="idcard-img" src="static/zhengmian.png" mode=""></image>
						<image v-else class="idcard-img" :src="cardFront" mode="aspectFill"></image>
					</view>
					<view @click="handleUploadIDImgPositive('cardBack')" class=" tp-mb20">
						<image v-if="!cardBack" class="idcard-img" src="static/fanmian.png" mode=""></image>
						<image v-else class="idcard-img" :src="cardBack" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<!-- 须知 S -->
			<view class="level_align tp-h88   tp-fc333 tp-fz28 tp-lh44" @click="isRead = !isRead">
				<image v-if="!isRead" class="tp-img28 tp-mr20" src="static/choose0-icon.png" mode=""></image>
				<image v-if="isRead" class="tp-img28 tp-mr20" src="static/choose1-icon.png" mode=""></image>
				<view class="flex-1 level_align flex_wrap">
					同意 <text class="tp-fc" @click.stop="pageJumps('/pages/others/depositRule?type=19&name=商家入驻协议')">《商家入驻协议》</text>

				</view>
			</view>
			<!-- 须知 E -->
		</view>
		<!-- 个人信息 E -->
		<!-- 审核中 S -->
		<view class="column_align" v-if="step == 3">
			<image class="audit-img tp-mt80" src="static/audit-ing.png" mode=""></image>
			<view class="tp-lh88 tp-mt20">
				商家入驻信息正在审核中
			</view>
		</view>
		<!-- 审核中 E -->
		<!-- 审核成功 S -->
		<view class="column_align" v-if="step == 4">
			<image class="audit-img tp-mt80" src="static/audit-finish.png" mode=""></image>
			<view class="tp-lh88 tp-mt20">
				恭喜你审核信息已通过
			</view>
			<view class="tp-w520 tp-bcF5 tp-br8 tp-pd20 tp-fc333 tp-fz28 tp-lh54">
				<view class="level_align">
					<text class="tp-mr20">商家类型：</text><text>{{applyVo.shopType == 1 ? '商城' : applyVo.shopType == 2 ? '酒店' :applyVo.shopType == 3 ? '景区' : applyVo.shopType == 4 ?'交通' : ''}}</text>
				</view>
				<view class="level_align" @click="setClipboardData(loginAcc.account)">
					<text class="tp-mr20">登录账号：</text><text>{{loginAcc.account || ''}}</text>
				</view>
				<view class="level_align" @click="setClipboardData(loginAcc.pwd)">
					<text class="tp-mr20">登录密码：</text><text>{{loginAcc.pwd || ''}}</text>
				</view>
				<view class="flex" @click="setClipboardData(loginAcc.loginUrl)">
					<text class="tp-mr20 tp-wsn">登录地址：</text><text class="flex-1  ellispsis1" style="word-break:break-all;word-wrap:break-word">{{loginAcc.loginUrl || ''}}</text>
				</view>
				<view class="level_align">
					<text class="tp-mr20">请去商家平台进行登录，设置新的密码</text>
				</view>
			</view>
			<view class="level_align flex_between tp-mt80 tp-fz30">
				<view @click="pageJumps('./recruitRecord')" class="tp-bgf tp-border1 tp-fc center_combo tp-h80 tp-br40  tp-ls4 tp-mr30"
				 style="border-color: #00B4FF;width: 300rpx;">申请记录</view>
				<view @click="step = 1" class="tp-bc tp-fcF tp-border1 tp-fc center_combo tp-h80 tp-br40  tp-ls4" style="border-color: #00B4FF;width: 300rpx;">入驻其他商家</view>
			</view>
		</view>
		<!-- 审核成功 E -->

		<!-- 审核失败 S -->
		<view class="column_align" v-if="step == 5">
			<image class="audit-img tp-mt80" src="static/audit-over.png" mode=""></image>
			<view class="tp-lh88 tp-mt20">
				审核信息失败
			</view>
			<view class="tp-br8  tp-yellow tp-fz26 tp-lh54">
				原因：{{applyVo.remark || ''}}
			</view>
			<view class="tp-w520 tp-h80 center_combo tp-br40 tp-fcF tp-mt80 tp-bc" @click="step = 1">
				返回商家信息
			</view>
			<view @click="pageJumps('./recruitRecord')" class="tp-w520 tp-h80 center_combo tp-br40 tp-fcF tp-mt40 tp-bc">
				查看申请记录
			</view>
		</view>
		<!-- 审核失败 E -->

		<!-- 下一步 S -->
		<view class="tp-pd30 tp-btn-h100" v-if="step < 3">
			<view class="tp-h88 tp-br44 tp-bc tp-fcF tp-fz32 center_combo" @click="next">
				{{step == 1 ? '下一步' : '提交审核'}}
			</view>
		</view>
		<!-- 下一步 E -->
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'; // 三级城市选择联动
	import cityData from '@/common/city.data.js';
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				step: 1, // 步骤  1 商家信息 2 个人信息  3 审核中  4 审核成功  5审核失败
				isRead: false, // 是否阅读须知
				licenseList: [], // 营业执照展示列表
				cardBack: '', //  	身份证反面
				cardFront: '', //  	身份证正面
				shopTypeList: [{
					name: '商城',
					type: 1
				}, {
					name: '酒店',
					type: 2
				}, {
					name: '景区',
					type: 3
				}, {
					name: '交通',
					type: 4
				}, ], // 	商家类型
				shopType: {}, // 选中的商家类型
				shopCategoryList: [], // 商城类目(商家店铺类型选择)
				storeType: {}, // 	店铺类型(只有选择商城时才有) --> shopCategory接口


				form: { // 表单
					shopName: '', // 	商家名称
					shopAddr: '', // 	商铺地址,
					license: '', // 营业执照
					legalName: '', // 法人名称
					legalPhone: '', // 手机号
					code: '', // 验证码
					idNumber: '', //  身份证号
					cardBack: '', //  	身份证反面
					cardFront: '', //  	身份证正面
				},
				loginAcc: {}, // 成功的信息
				applyVo: {}, // 入驻信息

				// 三级联动
				pickerText: '', // 三级联动得到的值
				pickerViewText: {}, // 页面需要的值 
				province: '', // 省
				city: '', // 市
				area: '', // 区
				mulLinkageTwoPicker: cityData, // 导入的数据
				cityPickerValueDefault: [0, 0, 1], // 三级联动选取的值
				themeColor: '#007AFF', // 确定的主题色

				time: 0, // 倒计时
				timer: null, // 倒计时定时器

				// 交通商家多列选择器
				leftlist: [], // 城市多列选择器 左侧数据
				rightlist: [],// 城市多列选择器 右侧数据
				trafficArr: [],// 城市多列选择器 整合数据
				hotelLeft: [], // 酒店景区城市的左侧列表
				hotelRight: [], // 酒店景区城市的右侧列表
				travelLeft: [], // 交通城市的左侧列表
				travelRight: [], // 交通城市的左侧列表
			};
		},
		onLoad() {
			this.getShopApplyInfo()
			this.getShopCategory()
			this.gethotelCityList()
			this.getList()
			
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getShopApplyInfo()
		},

		watch: {
			time(val) {
				if (val <= 0) {
					this.time = 0
					clearInterval(this.timer)
				}
			}
		},
		methods: {
			// 获取酒店景区的二级城市数据
			gethotelCityList() {
				this.$http.get(this.$api.destinationIndex + '?type=1').then(res => {
					if (res.code === 200) {
						this.hotelLeft = res.data.firstList
						this.hotelRight = res.data.secondList
						// this.trafficArr = [this.leftlist,this.rightlist[0]]
					}
				})
			},
			// 获取二级城市数据
			getList() {
				this.$http.get(this.$api.getCascaderCityList).then(res => {
					if (res.code === 200) {
						this.travelLeft = res.data.firstList
						this.travelRight = res.data.secondList
						// this.trafficArr = [this.leftlist,this.rightlist[0]]
					}
				})
			},
			// 交通商家多列选择器 某一列的值改变时触发
			bindMultiPickerColumnChange(e) {
				console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
				// this.multiIndex[e.detail.column] = e.detail.value
				switch (e.detail.column) {
					case 0: //拖动第1列
						this.trafficArr[1] = this.rightlist[e.detail.value]
						console.log(this.trafficArr);
						break
				}
				this.$forceUpdate()
			},
			// 交通商家区域选择改变
			trafficChange(e) {
				console.log(e);
				let arr = e.detail.value
				this.form.shopAddr = this.trafficArr[0][arr[0]].label + this.trafficArr[1][arr[1]].label
			},
			getCode() { // 通过手机号获取验证码
				if (!this.form.legalPhone) {
					return uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					});
				}
				this.$http.get(this.$api.sendMsg, {
					type: 10,
					phone: this.form.legalPhone
				}).then(res => {
					if (res.code == 200) {
						this.time = 59
						this.timer = setInterval(() => {
							this.time--
						}, 1000)
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			// 请求入驻信息
			getShopApplyInfo() {
				this.$http.get(this.$api.shopApplyInfo).then(res => {
					uni.stopPullDownRefresh();
					if (res.code === 200) {
						this.loginAcc = res.data.loginAcc
						this.applyVo = res.data.applyVo
						if (this.applyVo.auditStatus == 0) {
							this.step = 3
						} else if (this.applyVo.auditStatus == 1) {
							this.step = 4
						} else if (this.applyVo.auditStatus == 2) {
							this.step = 5
						}
					} else if (res.code == 1000) {
						this.step = 1
					}
				})
			},
			// 提交表单
			submitForm() {
				let {
					shopName,
					shopAddr,
					license,
					legalName,
					legalPhone,
					code,
					idNumber,
					cardBack,
					cardFront
				} = this.form

				this.$http.post(this.$api.shopApply, {
					shopName,
					shopType: this.shopType.type,
					storeType: this.storeType.id,
					shopAddr,
					license,
					legalName,
					legalPhone,
					code,
					idNumber,
					cardBack,
					cardFront,
					verify: this.form.code
				}).then(res => {
					if (res.code === 200) {
						this.getShopApplyInfo()
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
					}
				})
			},
			// 取消时的停靠的数据,下次打开在这个位置
			onCancel(e) {
				console.log(e)
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			// 处理联动数据
			onConfirm(e) {
				this.pickerText = JSON.stringify(e)
				this.pickerViewText = JSON.parse(this.pickerText)
				let str = this.pickerViewText.label.split('-')
				this.form.shopAddr = str.join('')
			},
			// 下一步
			next() {

				if (this.step == 2) {
					if (!this.form.legalName) return uni.showToast({
						title: '请填写法人名称',
						icon: 'none'
					})
					if (!this.form.legalPhone) return uni.showToast({
						title: '请填写手机号',
						icon: 'none'
					})
					if (!this.$regexPhone.test(this.form.legalPhone)) return uni.showToast({
						title: '请检查手机号是否正确',
						icon: 'none'
					})
					if (!this.form.code) return uni.showToast({
						title: '请填写验证码',
						icon: 'none'
					})
					if (!this.form.idNumber) return uni.showToast({
						title: '请填写身份证号',
						icon: 'none'
					})
					if (!this.$regexID.test(this.form.idNumber)) return uni.showToast({
						title: '请检查身份证号是否正确',
						icon: 'none'
					})
					if (!this.form.cardFront) return uni.showToast({
						title: '请上传身份证正面',
						icon: 'none'
					})
					if (!this.form.cardBack) return uni.showToast({
						title: '请上传身份证反面',
						icon: 'none'
					})
					if (!this.isRead) return uni.showToast({
						title: '请阅读入驻协议',
						icon: 'none'
					})
					this.submitForm()
				}
				if (this.step == 1) {
					if (!this.form.shopName) return uni.showToast({
						title: '请填写商家名称',
						icon: 'none'
					})
					if (!this.shopType.type) return uni.showToast({
						title: '请选择商家类型',
						icon: 'none'
					})
					if (this.shopType.type == 1 && !this.storeType.id) return uni.showToast({
						title: '请选择店铺类型',
						icon: 'none'
					})
					if (!this.form.shopAddr) return uni.showToast({
						title: '请选择商铺地址',
						icon: 'none'
					})
					if (!this.form.license) return uni.showToast({
						title: '请上传营业执照',
						icon: 'none'
					})
					this.step++
				}
			},
			// 点击选中商铺类型
			handleShopCategory(e) {
				console.log(e);
				this.storeType = this.shopCategoryList[e.detail.value]
			},
			// 商城类目(商家店铺类型选择)
			getShopCategory() {
				this.$http.get(this.$api.shopCategory).then(res => {
					uni.stopPullDownRefresh();
					if (res.code === 200) {
						this.shopCategoryList = res.data
					}
				})
			},
			// 点击显示动作菜单
			handleActionSheet() {
				let _this = this
				let arr = []
				this.shopTypeList.forEach(item => {
					arr.push(item.name)
				})
				uni.showActionSheet({
					itemList: arr,
					success: (res) => {
						console.log(res);
						if(this.shopType.type && this.shopType.type == 4 && this.shopTypeList[res.tapIndex].type != 4){  // 原本是交通，切换到不是交通
							this.form.shopAddr = ''
						} else if(this.shopType.type && [2,3].includes(this.shopType.type) && ![2,3].includes(this.shopTypeList[res.tapIndex].type - 0)){  // 原本是酒店景区，切换到不是酒店景区
							this.form.shopAddr = ''
						}else if(this.shopType.type && this.shopType.type != 4 && this.shopTypeList[res.tapIndex].type == 4){  // 原本不是交通，切换到交通
							this.form.shopAddr = ''
						} else if(this.shopType.type && ![2,3].includes(this.shopType.type) && [2,3].includes(this.shopTypeList[res.tapIndex].type - 0)){  // 原本不是酒店景区，切换到酒店景区
							this.form.shopAddr = ''
						}  else if(!this.shopType.type && [2,3,4].includes(this.shopTypeList[res.tapIndex].type - 0)){  // 原本没有选择类型， 然后选择交通
							this.form.shopAddr = ''
						}
						if([2,3].includes(this.shopTypeList[res.tapIndex].type - 0)){
							console.log(2,3);
							this.leftlist = this.hotelLeft
							this.rightlist = this.hotelRight
							this.trafficArr = [this.hotelLeft,this.hotelRight[0]]
						}else if([4].includes(this.shopTypeList[res.tapIndex].type - 0)){
							console.log(4);
							this.leftlist = this.travelLeft
							this.rightlist = this.travelRight
							this.trafficArr = [this.travelLeft,this.travelRight[0]]
						}
						this.shopType = this.shopTypeList[res.tapIndex]
					},
					fail: (res) => {
						console.log(res.errMsg);
					}
				});
			},
			// #ifdef MP-WEIXIN
			// 复制
			setClipboardData(content) {
				uni.setClipboardData({
					data: content,
					success: function() {
						console.log('success');
					}
				});
			},
			// #endif
			// #ifdef H5
			//h5复制文本到剪切板
			setClipboardData(content) {
				let oInput = document.createElement('input');
				oInput.value = content; //要复制的订单编号
				document.body.appendChild(oInput);
				oInput.select(); // 选择对象;
				document.execCommand("Copy"); // 执行浏览器复制命令
				uni.showToast({
					title: '复制成功'
				})
				oInput.remove()
			},
			// #endif
			// 删除营业执照
			delImg(index){
				this.licenseList.splice(index,1)
				this.form.license = this.licenseList.join(',')
			},
			// 预览图片
			previewImg(url,list,name) {
				let arr = []
				if(name){   // 如果指定字段名，说明需要处理数据
					list.forEach(item => {
						arr.push(item[name])
					})
				} else {
					arr = list
				}
				uni.previewImage({
					current: url,
					urls: arr,
					success: function(){
						console.log('预览')
					},
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 上传图片
			handleUploadIDImgPositive(name) {
				const _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera '],
					success: ({
						tempFilePaths
					}) => {

						uni.uploadFile({
							url: _this.$baseUrl + _this.$api.uploadFile,
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								let uploadData = JSON.parse(uploadFileRes.data)
								console.log(uploadData);
								let url = _this.$imgUrl + uploadData.url
								if(name == 'licenseList'){
									_this.licenseList.push(url)
									_this.form.license = _this.licenseList.join(',')
								}else{
									_this.form[name] = uploadData.url
									_this[name] = url
								}
								// _this.$set(this.updata, key, uploadData.url)
							}
						})
					}
				});
			},
		},
		onBackPress() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel(); // picker废除 性能优化
				return true;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.line {
		height: 6rpx;
		width: 164rpx;
		background: #CCCCCC;
		border-radius: 1rpx;
	}

	.title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: 100rpx;
		top: 110%;
		z-index: 10;
	}

	.up-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 4rpx;
	}

	.idcard-img {
		width: 296rpx;
		height: 188rpx;
		border-radius: 12rpx;
	}

	.audit-img {
		width: 150rpx;
		height: 142rpx;
	}

	.input {
		flex: 1;
		padding: 0 120rpx 0 0;
	}

	.getcodebtn {
		right: 20rpx;
		padding: 6rpx 10rpx;
		min-width: 160rpx;
		text-align: center;
		border: 1px solid $blue;
		color: $blue;
		z-index: 3;
		border-radius: 8rpx;
	}
	.close-icon{
		position: absolute;
		top: -24rpx;
		right: -20rpx;
	}
</style>
